<template>
	<view class="p-top20" v-if="info">
		<view class="OrderInfo">
			<view class="stateTxt bot" v-if="!uid">
				<text class="color_33 size26">订单状态：</text>
				<text class="ItemTxt">{{stateTxt}}</text>
			</view>

			<text class="txt bot" selectable>订单单号：{{info.ordcode}}</text>
			<text class="txt bot" selectable>订单时间：{{info.order_date}}</text>
			<text class="txt bot" selectable>下单用户：{{info.own_userInfo.v_name}}</text>
			<text class="txt " selectable 
			     @click.stop="$Tel(info.own_userInfo.v_tel)">用户电话：{{info.own_userInfo.v_tel}}</text>
		</view>
		
		<view class="address" v-if="!uid">
		    <view class="iconfont icon-dizhiguanli black size32 m-top6"></view>
			<view class="Receiving">
				<view class="d-flex a-center">
					<text class="size32 black">{{info.used_info.own_name}}</text>
					<text class="size32 black p-left30" 
					     @click.stop="$Tel(info.used_info.own_phone)">{{info.used_info.own_phone}}</text>
				</view>
				<text class="m-top10 color_33 size26" selectable>{{info.used_info.own_address}}</text>
			</view>
		</view>
		
		
		
		<view class="product" v-for="(item,index) in info.goodsList" :key="index">
			<view class="headimgBox">
			  <image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="headimg"></image>
			 <view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
			</view>
			<view class="content">
				<text class="size28 black">{{item.pdtname}}</text>
				<text class="color_99 size26">数量：x{{item.pdt_num}}</text>
				<view class="d-flex a-center" v-if="item.buy_store_name">
					<view class="iconfont icon-mendian color_99 size36 m-right10"></view>
					<text class="size26 color_99">{{item.buy_store_name}}</text>
				</view>
				
			</view>
		</view>
		
		
		<view class="viewbox auto d-flex j-sa m-top50" v-if="info.delivery_status == 1">
			<view class="configBtn" @click="distribution(1)">自配商品</view>
			<view class="configBtn" @click="expressage = true">物流发送</view>
		</view>
		<view class="viewbox auto d-flex j-sa m-top50" v-if="veruid">
			<view class="configBtn" @click="verification">核 銷</view>
			<view class="configBtn" v-if="multiStore" @click="show = true">选择门店</view>
		</view>
		
		<Material  v-if="expressage"  @Hide="expressage = $event"
		         @Logistics="distribution(2,$event)"></Material>
				 
				 
		
		<u-popup :show="show" mode="bottom" round="10" :safeAreaInsetBottom="false">
		    <view class="verPop">
				<text class="black size36 bold text-center p-bot30">选择门店</text>
				<view class="verBox">
					<view class="verList" :class="{'verActive':veruid == item.uid}" 
					   v-for="(item,index) in storeData" :key="item.shop_id"
					   @click.stop="selectStore(item)">
						<text class="storeName">{{item.name}}</text>
						<view class="d-flex  m-top20">
							<view class="iconfont icon-dizhiguanli size30 black m-right10"></view>
							<text class="color_99 h6">{{item.address}}</text>
						</view>
						<view class="d-flex a-center m-top20">
							<view class="iconfont icon-mendian1 size30 color_33 m-right10"></view>
							<text class="color_99 h6">{{item.shop_id}}</text>
						</view>
						<view class="iconfont icon-xuanze white size28"></view>
					
					</view>
					
				</view>
				
			</view> 
	    </u-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				uid:'',
				shopIds:'',
				info:'',
				expressage:false,
				show:false,
				veruid:'',
				vershop_id:'',
				storeData:[],
			}
		},
		onLoad(opt) {
			if(opt.id) this.id = opt.id;
			if(opt.uid){
				this.uid = opt.uid;
				const hasComma = opt.uid.includes(',');
				if(!hasComma) this.veruid = opt.uid
			};
			if(opt.shopIds){
				this.shopIds = opt.shopIds;
				const hasComma = opt.shopIds.includes(',');
				hasComma?this.getStore():this.vershop_id = opt.shopIds;
			} 
			this.getWarehouseOrderInfo();
		},
		methods: {
			getWarehouseOrderInfo(){
				this.$http.post({
					url:'/singleSaleManageApi/getWarehouseOrderInfo',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						id:this.id,
						uid:this.uid,
						shopIds:this.shopIds
					}
				}).then(res=>{
					if(res.code != 100) return this.$Toast(res.msg,2);
					this.info = res.data;
				})
			},
			
			distribution(way,Item){
				this.$showLoading('');
				let Data = {
					shop_id: uni.getStorageSync('store_id'),
					id: this.id
				}
				if(way == 1) Data['send_code'] = 'MySelf';
				if(way == 2) Data = {...Data,...Item};
				this.$http.post({
					url:'/singleSaleManageApi/orderDistribution',
					data:Data
				}).then(res=>{
					this.$hideLoading();
					if(res.code != 100) return this.$Toast(res.msg);
					this.$Toast(res.msg);
					this.expressage = false;
					this.getWarehouseOrderInfo();
				})
			},
			getStore(){
				this.$http.post({
					url:'/singleSaleManageApi/getStore',
					data:{
						shopIds:this.shopIds
					}
				}).then(res=>{
					if(res.code != '200') return this.$Toast(res.msg);
					const result = res.data || [];
					this.storeData = result;
					this.show = true;
				})
			},
			selectStore(item){
				this.veruid = item.uid;
				this.vershop_id = item.shop_id;
				this.show = false;
			},
			async verification(){
			  const Bool =  await this.$model('核销','是否确定核销？');
			  if(!Bool) return;
			  this.$http.post({
				  url:'/singleSaleManageApi/usedWarehouseQR',
				  data:{
					  id:this.id,
					  uid:this.veruid,
					  shop_id:this.vershop_id
				  }
			  }).then(res=>{
				  if(res.errcode != '100') return this.$Toast(res.msg);
				  this.$Toast(res.msg);
				  this.veruid = '';
			  })
			}
		},
		computed:{
			stateTxt(){
				if(this.info.delivery_status == 1) return '待发货';
				if(this.info.delivery_status == 2) return '已发货';
				if(this.info.delivery_status == 3) return '已签收';
			},
			multiStore(){
				if(!this.uid) return;
				const Bool = this.uid.includes(',');
				return Bool ? true : false;
			}
		},
	
	}
</script>

<style>
	page{
		background-color: #f7f9fa;
	}
</style>
<style lang="scss" scoped>
	.OrderInfo{
		width:690rpx;
		margin:0 auto;
		padding:10rpx 0;
		background-color:#ffffff;
		border-radius: 30rpx;
		overflow: hidden;
	}
	.address{
		width:690rpx;
		margin:30rpx auto;
		background-color:#ffffff;
		padding:30rpx 20rpx;
		border-radius: 30rpx;
		overflow: hidden;
		display: flex;
	}
	.headimgBox{
		width:140rpx;
		height: 140rpx;
		position: relative;
	}
	.headimg{
		width:140rpx;
		height: 140rpx;
		border-radius: 10rpx;
		overflow: hidden;
	}
	.numId {
		position: absolute;
		right: 0;
		top: 0;
		background: #FF784A;
		border-radius: 0 10rpx 0 10rpx;
	}
	.txt{
		width:100%;
		height: 80rpx;
		padding: 0 24rpx;
		font-size:26rpx;
		color:#333;
		display: flex;
		align-items: center;
	}
	.Receiving{
		flex:1;
		margin-left:10rpx;
		display: flex;
		flex-direction: column;
	}
	.product{
		width:690rpx;
		background-color: #ffffff;
		padding:30rpx 20rpx;
		border-radius: 30rpx;
		overflow: hidden;
		margin:30rpx auto;
		display: flex;
	}
	.content{
		flex:1;
		margin-left:20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between
	}
	.stateTxt{
		height: 80rpx;
		padding:20rpx;
		display: flex;
		align-items: center;
	}
	.ItemTxt{
		color:$color;
		font-weight: bold;
		font-size:30rpx;
	}
	.configBtn{
		width:230rpx;
		height: 80rpx;
		background-color: $color;
		color:#fff;
		font-size:26rpx;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.verPop{
		width:100%;
		padding-top:30rpx;
		display: flex;
		flex-direction: column;
	}
	.verBox{
		width:100%;
		max-height: 800rpx;
		overflow-y: scroll;
		padding:0 20rpx 30rpx 20rpx;
		background-color: #f8f8f8;
	}
	.verList{
		width:100%;
	
		padding:20rpx 30rpx;
		background-color: #fff;
		margin-top:20rpx;
		border-radius: 10rpx;
		border:1rpx solid #fff;
		display: flex;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}
	.storeName{
		color:#000;
		font-size:32rpx;
	}
	.verActive{
		border:1rpx solid $color;
		position: relative;
	}
	.verActive::after{
		 content: '';
		  width: 0;
		  height: 0;
		  border-top: 50rpx solid $color;
		  border-left: 50rpx solid transparent;
		  position: absolute;
		  top:0;
		  right:0;
	}
	.icon-xuanze{
		position: absolute;
		top:2rpx;
		right: 0;
		z-index:10;
	}
</style>
